<template>
  <div class="flex">
    <div
      v-for="(item, index) in imgList"
      :key="index"
      :style="{ background: `url(${item}) center/100% 100% no-repeat` }"
      :class="[{ active: index === act }, 'wrap w-80px h-222px cursor-pointer']"
      @click="act = index"
    >
      <div>{{ index + 1 }}/{{ imgList.length }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import img1 from "../assets/images/img1.png";
import img2 from "../assets/images/img2.png";
import img3 from "../assets/images/img3.png";
import img4 from "../assets/images/img4.png";
const imgList = ref([img1, img2, img3, img4]);
const act = ref(0);
</script>
<style lang="scss" scoped>
.wrap {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 16px;
  transition: all 0.6s ease-in-out;
  div {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }
}
.active {
  width: 334px;
  div {
    opacity: 1;
  }
}
</style>
